<template>
	<div class="fcontentTop">
		<div class="content" v-for="(item,index) in list" @click="jump(item.id,index)">
			<div class="img">
				<img :src="filterImg(item.img)" />		
			</div>
			<div class="details">
				<!--标题-->
				<div class="movie_t">
					<div class="title">{{item.nm}} <span class="span_bg"></span></div>
					<div class="max_logo " :class="item.version"></div>
				</div>
				<!--n个人想看-->
				<div class="wantSee" v-if="item.globalReleased==false"><span>{{item.wish}}</span>人想看</div>
				<!--观众评分-->
				<div class="score" v-if="item.globalReleased==true">观众评 <span>{{item.sc}}</span></div>
				<!--主演-->
				<div class="yanyuan">主演:{{item.star}}</div>
				<!--今天n家影院放映-->
				<div class="movie_shop" >{{item.showInfo}}</div>
				<!--预售按钮-->
				<div class="yushou" v-if="item.globalReleased==false">预售</div>
				<!--购票按钮-->
				<div class="buy"v-if="item.globalReleased==true">购票</div>
				
			</div>
		</div>
	</div>
</template>

<script>
import axios from "axios"
import  api from '@/api/index.js'
export default{
	data:function(){
		return {
			list:[]
		}
	},

	methods:{

		jump(movieId,index){
			this.$store.commit("setHTitle",{
				hTitle:this.list[index].nm
			});

			this.$store.commit("setHiddenFoot",{
				hiddenFoot:true
			});
			this.$store.commit("setMovieDetails",{
				movieTitle:this.list[index].nm,
				movieSrc:this.list[index].img
			})
//				传入id,进行跳转
			this.$router.push({path:'/details_movie',query:{movieId:movieId}})

		},
		filterImg(img){
				return img.replace(/\w.h/,"128.180")
		}
		
	}, 
	mounted(){
		
		axios.get(api.movieOnInfoList)
		.then((resolve)=>{
			console.log(resolve)
			this.list=resolve.data.movieList;
			console.log(this.list)
			localStorage.setItem("report",JSON.stringify(this.list))
		})		
//			
//			
//			
//			return new Promise((resolve,reject)=>{
//				var xhr=new XMLHttpRequest();
//				xhr.open("GET",this.baseUrl+"/cat");
//				xhr.send();
//				xhr.addEventListener("readystatechange",function(){
//				
//					if(xhr.readyState==4){
//						if(xhr.status==200){
//							resolve(xhr.response)
//						}
//					}
//					
//				})
//
//			}).then((res)=>{
//				this.list=JSON.parse(res).data
//				console.log(this.list)
////				本地存储
//				localStorage.setItem("report",JSON.stringify(this.list))
//			})
	}
}
</script>

<style lang="scss" scoped>
	.fcontentTop{
		margin-top: 90px;
		margin-bottom: 30px;
	}
	.content{
		padding: 12px 14px 12px 15px;
		display: flex;
	}
	.img{
		width: 65px;
		height: 95px;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.span_bg{
		
	}
	.details{
		margin-left: 10px;
		border-bottom: 1px solid #e6e6e6;
		width: 75%;
		position: relative;
	}
	.title{
		font-size: 17px;
		font-weight: 600;
		color: #333;
		margin-bottom: 5px;
	}
	
	.movie_t{
		display: flex;
		align-items: center;
	}
	.wantSee{
		font-size: 13px;
		margin-bottom: 5px;
		span{
			font-size: 15px;
			color: #faaf00;
		}
	}
	.score{
		font-size: 13px;
		span{
			color: #faaf00;
			font-weight: bold;
			font-size: 15px;
		}
	}
	.yanyuan{
		font-size: 13px;
		overflow: hidden;
		width: 200px;
		height: 15px;
		/*超出部分...*/
		text-overflow:ellipsis;
		white-space: nowrap;
		margin-bottom: 5px;
		color: #666;
	}
	.movie_shop{
		font-size: 13px;
		color: #666;
		margin-bottom: 15px;
		
	}
	.show{
		font-size: 13px;
		color: #666;
	}
	.yushou{
		width: 47px;
		height: 27px;
		background: deepskyblue;
		border-radius: 2px;
		text-align:center;
		font-size: 12px;
		color: white;
		line-height: 27px;
		position: absolute;
		top: 30%;
		right: 0;
	}
	.buy{
		width: 47px;
		height: 27px;
		background: #f03d37;
		border-radius: 2px;
		text-align:center;
		font-size: 12px;
		color: white;
		line-height: 27px;
		position: absolute;
		top: 30%;
		right: 0;
	}
	.max_logo{
		
		width: 43px;
		height: 14px;
		margin-left: 5px;
		border-radius: 2px;
	}
	.v3d{
		background-image: url(../../assets/3D.png);
		background-size: 47.5%;
		background-repeat: no-repeat;
	}
	.v3d.imax{
		background-image: url(../../assets/3DIMAX.png);
		background-size: 100%;
	}
	.v2d.imax{
		background-image: url(../../assets/2DIMAX.png);
		background-size: 100%;
	}
</style>